<template>
  <el-card
    class="box-card"
    shadow="hover"
    :body-style="{ padding: '0px 5px', height: '815px' }"
  >
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">装机必备</span>
        <span class="rjfl-more" @click="gotoList(387 + '_0_0_0_1', $router)"
          >更多
        </span>
      </div>
    </template>

    <div class="types">
      <div class="type" v-for="(it, i) in data" :key="i">
        <div class="type-top" @click="gotoRouter('/page/387_'+'0'+'_'+it.id+'_0_1.html',$router)">{{ it.name }}</div>

        <div class="type-content">
          <template v-for="(jt, j) in it.softVoList" :key="i + '_' + j">
            <div class="it" @click="gotoDetail(jt, $router, axios)">
              <img :src="jt.icon" />
              <span>{{ jt.name }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from "vue";

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

// const it = ref({
//   name: "梦想世界",
//   icon: "https://placeholder.idcd.com/?w=72&h=72&text=72x72",
//   id: "",
// });
</script>

<style lang="less" scoped>
.types {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  .type {
    margin: 5px 0px;
    width: 140px;

    &-top {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      background: #f5f7f8;
      font-weight: 600;
      color: #1d2127;
      line-height: 14px;
      cursor: pointer;
      &:hover {
        color: @link-color;
      }
    }

    &:nth-child(1),
    &:nth-child(7),
    &:nth-child(13) {
      .type-top {
        border-radius: 8px 0px 0px 0px;
      }
    }
    &:nth-child(6),
    &:nth-child(12),
    &:nth-child(18) {
      .type-top {
        border-radius: 0px 8px 0px 0px;
      }
    }

    &-content {
      img {
        margin-left: 20px;
        width: 24px;
        height: 24px;
        border-radius: 4px;
        object-fit: cover;
      }
      .it {
        height: 48px;
        background: #ffffff;
        border: 1px solid #f5f7f8;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        &:hover {
          img {
            width: 30px;
            height: 30px;
            transition: all 0.1s;
          }
          span {
            color: @link-color;
          }
          background-color: #f5f7f8;
        }
      }

      span {
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #545759;
        line-height: 14px;
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  .type {
    width: 138px !important;
  }
}
</style>
